<template>
	<view class="service-log">
		<view class="log-item" v-for="(item,index) in list" :key='index' @tap="$open('/pages/mine/check-detail/check-detail',{order_id: item.id})">
			<view class="title">
				<text class="caption">核销{{item.goods_list.length}}件</text>
				<view class="store">
					门店：<text class="address">{{item.store_name}}</text>
				</view>
			</view>
			<view class="content">
				<text class="content-item" v-for="(innerItem, innerIndex) in item.goods_list" :key='innerIndex'>{{innerItem}}</text>
			</view>
			<view class="data-box">
				<view class="personal">核销人：<text class="name">{{item.writer_name}}</text></view>
				<text class="time">{{item.create_time | toDate}}</text>
			</view>
		</view>
		<view v-show='isEmpty'>
			<empty></empty>
		</view>
		<view v-show="!isEmpty">
			<load-more :status='loadStatus'></load-more>
		</view>
	</view>
</template>

<script>
	import loadMore from '@/components/uni-load-more/uni-load-more'
	import empty from '@/components/empty/empty'
	import storage from '@/commen/utils/storage'
	import {serviceLog} from '@/commen/js/config'
	import {toDate} from '@/commen/utils/utils'
	
	export default {
		data() {
			return {
				list: [], // 列表
				requestKey: true, // 请求开关
				isEmpty: false, // 是否为空
				loadStatus: 'more', // more loading noMore
				page: 1, // 页数
			};
		},
		components: {
			loadMore,
			empty
		},
		onPullDownRefresh() {
			this.init()
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			if (!this.requestKey) return
			this.page++
			this.getList()
		},
		onLoad() {
			this.getList()
		},
		filters: {
			// 转化时间
			toDate(time) {
				const date = toDate(time)
				return `${date[0]}.${date[1]}.${date[2]} ${date[3]}:${date[4]}`
			}
		},
		methods: {
			// 初始化
			init() {
				this.page = 1
				this.requestKey = true
				this.isEmpty = false
				this.list = []
			},
			// 获取列表
			async getList() {
				this.loadStatus = 'loading'
				const params = {
					token: storage.get('token'),
					page: this.page
				}
				const [err, res] = await serviceLog(params)
				if (res) {
					if (res.list.length == 0 && this.page == 1) {
						this.requestKey = false
						this.isEmpty = true
						return
					} else if (res.list.length == 0 && this.page > 1) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					this.list = this.list.concat(res.list)
					if (res.list.length<15 && this.page == 1) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					this.loadStatus = 'more'
				} else {
					this.isEmpty = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.service-log {
		@include box-w(100%, $bg-g);

		.log-item {
			margin-top: 10rpx;
			background-color: $bg-c;

			.title {
				@include flex-row(space-between);
				padding: 36rpx 32rpx 0;

				.caption {
					@include font-set($font-d, $color-c, bold);
				}

				.store {
					@include font-set($font-b, $color-c, 500);
					@include font-one();
					width: 500rpx;
					text-align: right;

					.address {
						color: $color-i;
					}
				}
			}

			.content {
				padding: 60rpx 32rpx 30rpx;
				@include flex-col(flex-start, flex-start);

				.content-item {
					@include box-w(100%);
					@include font-set($font-b, $color-c);
					@include font-one();

					&~.content-item {
						margin-top: 30rpx;
					}
				}
			}

			.data-box {
				@include flex-col(flex-start, flex-end);
				padding: 0 32rpx;

				.personal {
					@include font-set($font-b, $color-c);

					.name {
						font-weight: bold;
					}
				}

				.time {
					@include font-set($font-b, $color-d);
					margin-top: 26rpx;
					margin-bottom: 40rpx;
				}
			}
		}
	}
</style>
